import React from 'react'
import { Form } from 'antd'
import style from './style.module.scss'
import { Rule } from 'rc-field-form/lib/interface'

interface IProps {
    name?: string
    placeholder?: string
    titleColor?: string
    titleSize?: string
    rules?: Rule[]
    children?: any
    style?: React.CSSProperties
    onChange?: () => void
    tips?: string
}

export default function UnderlinedInputField(props: IProps) {
    return (
        <Form.Item className={style.underlined} style={props.style}>
            <div
                style={{
                    color: props.titleColor || '#747474',
                    fontSize: props.titleSize || '12px'
                }}>
                {props.placeholder || 'Undefined'}
            </div>
            <label>
                <Form.Item noStyle help={props.tips} name={props.name} style={props.style} rules={props.rules}>
                    {props.children}
                </Form.Item>
                <span className={style.lined} />
            </label>
        </Form.Item>
    )
}
